<template>
    <div class="header" id="header">
        <video autoplay loop>
            <source src="https://myblog-1302916147.cos.ap-guangzhou.myqcloud.com/els.mp4">
        </video>

        <div class="title">
            <h2>Hello World</h2>
            <p>欢迎来到Gas的博客</p>
        </div>

        <div class="Next_btn">
            <i @click="Scroll()" class="iconfont icon-ic_nextpage"></i>
        </div>
    </div>
</template>

<script>
export default {
    name:"HomeHeader",
    methods:{
        Scroll(){
            document.documentElement.scrollTop = document.getElementById('header').offsetWidth;
            // ScrollTop(document.getElementById('header').offsetWidth,20);
        },
    }
}
</script>

<style scoped>
.header{
    width: 100%;
    height: 100vh;
    position:relative;
}
video{
    min-height: 100%;
    min-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    right: 0;
    bottom: 0;  

    z-index: -99;
}

.title{
    width:50%;
    height:200px;
    margin: auto;  
    position: absolute;  
    top: 0; left: 0; bottom: 0; right:0;
    text-align: center;
    color: white;
}
.title h2{
    font-size: 75px;
    font-weight: bold;
    animation: title_min_max 5s ease;
}

@keyframes title_min_max {
    0%{
        opacity: 0;
        font-size: 0;
    }30%{
        opacity: 1;
    }
    100%{
        font-size: 75px;
    }
}

.Next_btn{
    width: 100%;
    position: absolute;
    bottom: 20px;
    margin: auto;
    text-align: center;
}
.Next_btn i{
    font-size: 35px;
    color: white;
    font-weight: 500;
}


</style>